<template>
	<view class="tab-container">
		<!-- 顶部Tab导航 -->
		<view class="tab-header">
			<view v-for="(item, index) in tabs" :key="index" class="tab-item" :style="{
          color: currentTab == index ? t('color1') : '',
         
          background: currentTab == index ? t('color2') : '',
        }" @click="switchTab(index)">
				{{ item }}
			</view>
		</view>
		<nodata></nodata>
		<!-- 内容区域 -->
		<!-- <view class="tab-content">
      <view v-if="currentTab === 0" class="content-item">
        <text>全部内容区域</text>
      </view>
      <view v-if="currentTab === 1" class="content-item">
        <text>商品内容区域</text>
      </view>
      <view v-if="currentTab === 2" class="content-item">
        <text>优惠券内容区域</text>
      </view>
      <view v-if="currentTab === 3" class="content-item">
        <text>积分内容区域</text>
      </view>
    </view> -->
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				tabs: ["全部", "商品", "优惠券", "积分"],
				currentTab: 0,
				indicatorWidth: 0,
				indicatorLeft: 0,
			};
		},

		methods: {
			switchTab(index) {
				this.currentTab = index;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.tab-container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.tab-header {
		position: relative;
		display: flex;

		background-color: #ffffff;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.tab-item {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #666666;
		background-color: #F7F8F9;
		padding: 6rpx 20rpx;
		border-radius: 20rpx;
		margin: 20rpx;

	}

	.tab-indicator {
		position: absolute;
		bottom: 0;
		height: 6rpx;
		background-color: #007aff;
		border-radius: 3rpx;
	}

	.tab-content {
		flex: 1;
		padding: 20rpx;
		overflow-y: auto;
	}

	.content-item {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>